<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生命周期</title>
  <script src="/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 什么是生命周期，从生到死 -->
    <!-- 每一个vue程序都会经历从创建、挂载、更新、卸载一系列过程 -->
    <!-- 如果你想参与其中，就需要vue提供的叫勾子函数 -->
    <p id="p">{{msg}}</p>
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        msg:'hello world'
      },
      methods: {
        show(){
          console.log('show');
        }
      },
      // beforeCreate() {
      //   // 第一个生命周期函数，表示实例完全被创建之前会执行的函数
      //   // console.log(this.msg); // 因为在beforecreate之前还没有对data 和 methods 进行初始化
      //   // this.show();
      //   console.log("beforeCreate");
      // },
      // created() {
      //   // 第二个生命周期函数，在created函数前data 和 methods初始化完毕
      //   // 如果只对data 或者methods 只操作一次，一般考虑在created生命周期中去执行
      //   console.log(this.msg);  // 
      //   this.show();
      //   console.log("Create");
      // },
      // beforeMount() {
      //   // 第三个生命周期函数，表示模板已经在内存中编译完成了，但是尚未渲染到页面中
      //   console.log(document.getElementById("p").innerText);//{{msg}}
      //   console.log("beforeMount");
      // },
      // mounted() {
      //   // 第四个生命周期函数，表示模板已经在内存中编译完成了且渲染到页面中
      //   console.log(document.getElementById("p").innerText);//hello world
      //   console.log("mounted");      
      // },
      beforeUpdate() {
        // 第五个生命周期函数，表示界面没有更新，但是数据已发生改变
        console.log(document.getElementById("p").innerText); //hello world
        console.log("beforeUpdate");   
      },
      updated() {
        // 第六个生命周期函数，表示界面更新的同时数据已发生改变
        console.log(document.getElementById("p").innerText);// shane
        console.log("updated");   
      },
      // beforeDestroy() {
      //   //第七个生命周期函数，实例未销毁前调用
      //   console.log("beforeDestroy"); 
      // },
      // destroyed() {
      //   //第八个生命周期函数，实例销毁后调用
      //   console.log("destroyed"); 
      // }
    })
    // app.$destroy()
  </script>
</body>
</html>